<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>备件管理系统 - 备件管理</title>
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
  <script src="https://unpkg.com/vue@3.2.36/dist/vue.global.prod.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://unpkg.com/element-plus"></script>
  <script src="https://unpkg.com/@element-plus/icons-vue/dist/index.iife.min.js"></script>
</head>
<body>
<div id="app">
  <!-- 页面标题插槽 -->
  <h2 style="display: none;"><slot name="pageTitle">备件管理</slot></h2>

  <!-- 页面头部插槽 -->
  <header class="header" style="display: flex; align-items: center; justify-content: space-between;">
    <h2 style="margin: 0;">备件管理</h2>
    <el-button type="info" size="small" @click="logout">退出</el-button>
  </header>

    <!-- 搜索框和新增按钮 -->
    <div style="display: flex; align-items: center; justify-content: center; margin: 20px 0;">
      <el-input
        v-model="searchText"
        placeholder="搜索型号/规格/供应商ID"
        size="small"
        style="width: 220px; margin-right: 10px;"
        @input="handleSearch"
        clearable
      ></el-input>
      <el-button
        type="primary"
        size="small"
        style="background-color: #007bff;"
        @click="showDialog = true"
      >新增备件</el-button>
    </div>

    <!-- 新增备件弹窗 -->
    <el-dialog title="新增备件" v-model="showDialog" width="500px">
      <el-form :model="dialogSparePart" label-position="left" label-width="80px">
        <el-form-item label="型号">
          <el-input v-model="dialogSparePart.model"></el-input>
        </el-form-item>
        <el-form-item label="规格">
          <el-input v-model="dialogSparePart.specification"></el-input>
        </el-form-item>
        <el-form-item label="供应商ID">
          <el-input v-model="dialogSparePart.supplierid"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="submitDialogSparePart">提交</el-button>
      </template>
    </el-dialog>

  <!-- 主体内容插槽 -->
  <main>
    <el-table :data="pagedSpareParts" border style="width: 100%">
      <el-table-column prop="sparepartid" label="ID"></el-table-column>
      <el-table-column prop="model" label="型号"></el-table-column>
      <el-table-column prop="specification" label="规格"></el-table-column>
      <el-table-column prop="supplierid" label="供应商ID"></el-table-column>
      <!-- 操作列 -->
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="mini" type="primary" icon="EditPen" @click="editSparePart(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" icon="Delete" @click="deleteSparePart(scope.row.sparepartid)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑备件弹窗 -->
    <el-dialog title="编辑备件" v-model="editDialogVisible" width="500px">
      <el-form :model="editSparePartForm" label-position="left" label-width="80px">
        <el-form-item label="型号">
          <el-input v-model="editSparePartForm.model"></el-input>
        </el-form-item>
        <el-form-item label="规格">
          <el-input v-model="editSparePartForm.specification"></el-input>
        </el-form-item>
        <el-form-item label="供应商ID">
          <el-input v-model="editSparePartForm.supplierid"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateSparePart">提交</el-button>
      </template>
    </el-dialog>
  </main>

  <!-- 分页和版权信息底部居中显示 -->
  <div style="position: fixed; left: 0; bottom: 0; width: 100%; background: #fff; z-index: 999;">
    <div style="display: flex; flex-direction: column; align-items: center; padding: 10px 0;">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="filteredSpareParts.length"
        :page-size="pageSize"
        :current-page="currentPage"
        @current-change="handlePageChange"
        style="margin-bottom: 10px;">
      </el-pagination>
      <footer class="footer" style="text-align: center;">
        &copy; 2025 备件管理系统 - 版权所有
      </footer>
    </div>
  </div>
</div>

<!-- 引入 Vue + Axios + Element Plus -->
<script src="https://unpkg.com/vue@3.2.36/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/element-plus"></script>
<script src="https://unpkg.com/@element-plus/icons-vue/dist/index.iife.min.js"></script>

<script>
  const { createApp } = Vue;
  const apiClient = axios.create({
    //本机地址
    //baseURL: 'http://localhost:8086',
    //服务器 地址
    baseURL: 'http://8.137.85.243:8086',
    timeout: 5000
  });

  const app = createApp({
    data() {
      return {
        spareParts: [],
        newSparePart: { model: '', specification: '', supplierid: null },
        searchText: '',
        showDialog: false,
        dialogSparePart: { model: '', specification: '', supplierid: null },
        currentPage: 1,
        pageSize: 10,
        editDialogVisible: false,
        editSparePartForm: { model: '', specification: '', supplierid: null }
      };
    },
    computed: {
      filteredSpareParts() {
        if (!this.searchText) return this.spareParts;
        return this.spareParts.filter(item =>
          String(item.model).includes(this.searchText) ||
          String(item.specification).includes(this.searchText) ||
          String(item.supplierid).includes(this.searchText)
        );
      },
      pagedSpareParts() {
        const start = (this.currentPage - 1) * this.pageSize;
        return this.filteredSpareParts.slice(start, start + this.pageSize);
      }
    },
    mounted() {
      this.loadSpareParts();
    },
    methods: {
      async loadSpareParts() {
        const res = await apiClient.get('/api/spareparts/listall');
        this.spareParts = res.data;
      },
      async addSparePart() {
        if (!this.newSparePart.model || !this.newSparePart.specification || !this.newSparePart.supplierid) {
          alert('请填写完整信息');
          return;
        }
        await apiClient.post('/api/spareparts/insert', this.newSparePart);
        this.newSparePart = { model: '', specification: '', supplierid: null };
        this.loadSpareParts();
      },
      async deleteSparePart(id) {
        if (!confirm('确定删除？')) return;
        await apiClient.delete(`/api/spareparts/delete/${id}`);
        this.loadSpareParts();
      },
      logout() {
        window.location.href = '/dashboard.html';
      },
      handleSearch() {
        this.currentPage = 1;
      },
      async submitDialogSparePart() {
        if (!this.dialogSparePart.model || !this.dialogSparePart.specification || !this.dialogSparePart.supplierid) {
          alert('请填写完整信息');
          return;
        }
        await apiClient.post('/api/spareparts/insert', this.dialogSparePart);
        this.dialogSparePart = { model: '', specification: '', supplierid: null };
        this.showDialog = false;
        this.loadSpareParts();
      },
      handlePageChange(page) {
        this.currentPage = page;
      },
      editSparePart(row) {
        this.editSparePartForm = { ...row };
        this.editDialogVisible = true;
      },
      async updateSparePart() {
        if (!this.editSparePartForm.model || !this.editSparePartForm.specification || !this.editSparePartForm.supplierid) {
          alert('请填写完整信息');
          return;
        }
        await apiClient.put(`/api/spareparts/update/${this.editSparePartForm.sparepartid}`, this.editSparePartForm);
        this.editSparePartForm = { model: '', specification: '', supplierid: null };
        this.editDialogVisible = false;
        this.loadSpareParts();
      }
    }
  });

  app.use(ElementPlus);
  const { EditPen, Delete } = ElementPlusIconsVue;
  app.component('EditPen', EditPen);
  app.component('Delete', Delete);
  app.mount('#app');
</script>
</body>
</html>